import { defineComponent } from "vue";
import { Image, Progress } from "ant-design-vue";
import { useRouter } from "vue-router";
import styles from "./courses-model.module.scss";
import mediaIcon from "@/assets/images/commen/icon-medal.png";

interface PropInterface {
  id: number;
  title: string;
  thumb: string;
  isRequired: number;
  progress: number;
}

export default defineComponent({
  name: "CoursesModel",
  props: {
    id: {
      type: Number,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
    thumb: {
      type: String,
      required: true,
    },
    isRequired: {
      type: Number,
      required: true,
    },
    progress: {
      type: Number,
      required: true,
    },
  },
  setup(props: PropInterface) {
    const router = useRouter();

    return () => (
      <div
        class={styles["item"]}
        onClick={() => {
          router.push(`/course/${props.id}`);
        }}
      >
        <div class={styles["top-content"]}>
          <Image width={120} height={90} style={{ borderRadius: 10 }} src={props.thumb} preview={false} />
          <div class={styles["info"]}>
            <div class={styles["title"]}>{props.title}</div>
            {props.isRequired === 1 && <div class={styles["type"]}>必修课</div>}
            {props.isRequired === 0 && <div class={styles["active-type"]}>选修课</div>}
          </div>
        </div>
        <div class={styles["status-content"]}>
          {props.progress == 0 && (
            <>
              <Progress style={{ width: 270 }} percent={0} strokeColor="#FF4D4F" trailColor="#F6F6F6" showInfo={false} />
              <span>未学习</span>
            </>
          )}
          {props.progress > 0 && props.progress < 100 && <Progress percent={props.progress} strokeColor="#FF4D4F" trailColor="#F6F6F6" />}
          {props.progress >= 100 && (
            <div class={styles["success"]}>
              <Image width={24} height={24} src={mediaIcon} preview={false} />
              <span class="ml-8">恭喜你学完此课程!</span>
            </div>
          )}
        </div>
      </div>
    );
  },
});
